@page "/styling-chart"
@using System.Globalization

<h1>Radzen Blazor Chart Styling</h1>
<RadzenExample Name="StylingChart" DocumentationUrl="https://www.radzen.com/documentation/blazor/chart/" Heading="false">
    <h3>
        <label style="display: flex; align-items: center">
            <span style="margin-right: 32px">Color scheme:</span>
            <RadzenDropDown Data="@colorSchemes" @bind-Value="@colorScheme" />
        </label>
    </h3>
    <div class="row">
        <div class="col-md-6 col-sm-12 p-4">
            <RadzenChart ColorScheme="@colorScheme">
                @for (var year = 2013; year <= 2020; year++)
                {
                    var currentYearRevenue = revenue.Where(r => r.Year == year).ToList();
                    <RadzenColumnSeries Data="@currentYearRevenue" CategoryProperty="Quarter" Title="@year.ToString()" ValueProperty="Revenue" />
                }
                <RadzenColumnOptions Margin="0" />
                <RadzenValueAxis Formatter="@FormatAsUSD" />
            </RadzenChart>
        </div>
        <div class="col">
            <RadzenChart ColorScheme="@colorScheme">
                <RadzenPieSeries Data="@revenue.Where(r => r.Year == 2020)" Title="Revenue" CategoryProperty="Quarter" ValueProperty="Revenue" />
            </RadzenChart>
        </div>
    </div>
    <h3>Custom colors and styling</h3>
    <div class="col-md-6 col-sm-12 p-4">
        <RadzenChart>
            <RadzenAreaSeries Stroke="rgb(236,72,127)" StrokeWidth="2" Fill="rgba(236,72,127,.5)" Data="@revenue.Where(r => r.Year == 2020)" CategoryProperty="Quarter" ValueProperty="Revenue">
                <ChildContent>
                    <RadzenMarkers MarkerType="MarkerType.Circle" Fill="#fff" Stroke="rgba(236,72,127)" StrokeWidth="2" Size="8" />
                </ChildContent>
                <TooltipTemplate Context="data">
                    Revenue for <span>@data.Quarter</span> 2020: <strong>@data.Revenue.ToString("C0", CultureInfo.CreateSpecificCulture("en-US"))</strong>
                </TooltipTemplate>
            </RadzenAreaSeries>
            <RadzenCategoryAxis>
                <RadzenGridLines Visible="true" Stroke="#ccc" LineType="LineType.Dashed" />
            </RadzenCategoryAxis>
            <RadzenValueAxis>
                <RadzenGridLines Visible="true" />
            </RadzenValueAxis>
            <RadzenChartTooltipOptions Style="border: 1px solid rgb(236,72,127); background: #eee; color: #000;" />
            <RadzenLegend Visible="false" />
        </RadzenChart>
    </div>
</RadzenExample>
@code {
    IEnumerable<ColorScheme> colorSchemes = Enum.GetValues(typeof(ColorScheme)).Cast<ColorScheme>();
    ColorScheme colorScheme = ColorScheme.Palette;

    class DataItem
    {
        public int Year { get; set; }
        public string Quarter { get; set; }
        public double Revenue { get; set; }
    }

    string FormatAsUSD(object value)
    {
        return ((double)value).ToString("C0", CultureInfo.CreateSpecificCulture("en-US"));
    }

    IList<DataItem> revenue = new List<DataItem>();

    protected override void OnInitialized()
    {
        var random = new Random();

        for (var year = 2013; year <= 2020; year++)
        {
            for (var quarter = 1; quarter <= 4; quarter++)
            {
                revenue.Add(new DataItem
                {
                    Year = year,
                    Quarter = $"Q{quarter}",
                    Revenue = random.NextDouble() * 200000
                });
            }
        }
    }
}